<template>
  <CommonCard title="累计订单量" value="2,456,824">
    <template v-slot:chart>
      <v-chart :option="getOption()" />
    </template>
    <template v-slot:footer>
      <span>咋天订单量 </span>
      <span class="emphasis">20,000,000</span>
    </template>
  </CommonCard>
</template>

<script>
import commonCardMixin from '../mixins/commonCardMixin'
export default {
  mixins: [commonCardMixin],
  methods: {
    getOption() {
      return {
        xAxis: {
          type: 'category', // 图表类别
          show: false, // 是否显示x坐标
          boundaryGap: false // 是否有边界缝隙
        },
        yAxis: {
          show: false // 是否显示y坐标
        },
        series: [
          {
            type: 'line', // 图标排列方式
            data: [
              // 图标书架
              620,
              432,
              220,
              534,
              790,
              430,
              220,
              320,
              532,
              320,
              834,
              690,
              530,
              220,
              620,
              786,
              561
            ],
            areaStyle: {
              // 图表背景颜色
              color: 'pink'
            },
            lineStyle: {
              // 控制每个数据连接的线的长度
              width: 0
            },
            itemStyle: {
              // 控制每个数据的圆点
              opacity: 0
            },
            smooth: true // 使图表变得顺滑
          }
        ],
        grid: {
          // 图表样式
          top: 0,
          left: 0,
          bottom: 0,
          right: 0
        }
      }
    }
  }
}
</script>
